<template>

    <a-card :bordered="false">
      <!-- 操作 -->
      <div class="table-operations">
        <a-button type="primary" @click="$refs.createSubForm.handleAdd()">
          <a-icon type="plus" />新增
        </a-button>
      </div>
      <!-- 增加修改 -->
      <create-sub-form
        ref="createSubForm"
        @add="handleAddDxmChukuDetail"
      />
      <!-- 数据展示 -->
      <a-table
        :loading="loading"
        :size="tableSize"
        rowKey="id"
        :columns="columns"
        :data-source="list"
        :pagination="false"
        :bordered="true"
      >

      <template slot="footer" slot-scope="currentPageData">
       <a-statistic  v-model="totalAmount" style="margin-right: 50px" :value-style="{ color: '#cf1322' }">
        <template #prefix>
              应收：
            </template>
      </a-statistic>
    </template>

        <span slot="operation" slot-scope="text, record">
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">
            <a-icon type="delete" />删除
          </a>
        </span>
      </a-table>

    </a-card>

</template>

<script>
import CreateSubForm from './CreateSubForm'
import { tableMixin } from '@/store/table-mixin'

export default {
  name: 'SubTableForm',
  components: {
    CreateSubForm
  },
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  mixins: [tableMixin],
  data () {
    return {
      visible: false,
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      columns: [
        {
          title: '商品名称',
          dataIndex: 'goodsname',
          ellipsis: true,
          align: 'left'
        },
        {
          title: '数量',
          dataIndex: 'num',
          ellipsis: true,
          align: 'left'
        },
        {
          title: '单价',
          dataIndex: 'price',
          ellipsis: true,
          align: 'left'
        },
        {
          title: '金额',
          dataIndex: 'allprice',
          ellipsis: true,
          align: 'left'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
    totalAmount() {
      // 计算金额总和
      return this.list.reduce((acc, item) => acc + parseFloat(item.allprice || 0), 0).toFixed(2);
    }
  },
  watch: {
  },
  methods: {
    // 关闭模态框
    close () {
      this.visible = false
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    // 打开抽屉(由外面的组件调用)
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = selectedRowKeys.map(item => item - 1)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      var that = this
      if (row) {
        var index = (this.list || []).findIndex((item) => item === row)
      }
      const ids = index !== undefined ? index : this.ids
      this.$confirm({
        title: '确认删除所选中数据?',
        content: '当前选中序号为' + ids + '的数据',
        onOk () {
          that.$emit('delete', index, ids)
        },
        onCancel () {}
      })
    },
    handleAddDxmChukuDetail (row) {
      this.$emit('add', row)
    }
  }
}
</script>
